import styles from './index.less';
import { Input, Select, Button, Tag, Space, Table } from 'antd';
import { useDispatch, useSelector } from 'umi';
import { UserModelState } from '@/models/user';
import { useEffect } from 'react';
import CommonFooter from '../../components/CommonFooter'
 
export default function userList() {
    const { userList } = useSelector((state: { user: UserModelState }) => state.user)
    const { Option } = Select;
    const columns = [
        {
            title: '账户',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '邮箱',
            dataIndex: 'email',
            key: 'email',
        },
        {
            title: '角色',
            dataIndex: 'role',
            key: 'role',
            render: (text: string) => {
                {

                    text = text === 'visitor' ? '访客' : '管理员'
                }
                return <span>{text}</span>
            }
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            render: (text: string) => {
                {
                    text = text === 'active' ? '可用' : '已锁定'
                }
                return <span>{text}</span>
            }
        },
        {
            title: '注册日期',
            dataIndex: 'createAt',
            key: 'createAt',
            render: (text: any) => {
                var json_data = new Date(text).toJSON();
                return <span>{new Date(new Date(json_data) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')}</span>
            }
        },
        {
            title: '操作',
            key: 'action',
            render: (text: any, record: any) => (
                <Space size="middle">
                    {
                         <Button type="link" onClick={async () => {

                            // 深拷贝对象
                            let obj = JSON.parse(JSON.stringify(record))

                            // 切换状态
                            obj.status = obj.status == 'active' ? 'locked' : 'active'

                            // 调用仓库修改状态方法
                            dispatch({
                                type: 'user/changeStatus',
                                payload: obj
                            })

                            // 重新获取该页数据  刷新
                            dispatch({
                                type: 'user/userList',
                                params: {
                                    page: 1,
                                    pageSize: 117
                                }
                            })
                        }}>
                            {
                                record.status == 'locked' ? '启用' : '禁用'
                            }
                        </Button>
                    }
                    {
                       <Button type="link" onClick={async () => {
                        // 深拷贝对象
                        let obj = JSON.parse(JSON.stringify(record))

                        // 切换状态
                        obj.role = obj.role == 'admin' ? 'visitor' : 'admin'

                        // 调用仓库修改状态方法
                        dispatch({
                            type: 'user/changeStatus',
                            payload: obj
                        })

                        // 重新获取该页数据  刷新
                        dispatch({
                            type: 'user/userList',
                            params: {
                                page: 1,
                                pageSize: 117
                            }
                        })
                    }}>
                        {
                            record.role == 'visitor' ? '授权' : '解除授权'
                        }
                    </Button>
                    }
                </Space>
                
            ),
        },
    ];
    let dispatch = useDispatch()
    useEffect(() => {
        dispatch({
            // 获取到module里面的user里面的userList
            type: 'user/userList'
        })
    }, [])
    return (
        <div className={styles.user}>
            <form className={styles.form}>
                账户:<Input placeholder="请输入用户账户" className='inp1'/>
                邮箱:<Input placeholder="请输入用户邮箱" />
                角色:<Select defaultValue="">
                    <Option value="Option1">管理员</Option>
                    <Option value="Option2">访客</Option>
                </Select>
                状态:<Select defaultValue="">
                    <Option value="Option1">锁定</Option>
                    <Option value="Option2">可用</Option>
                </Select>
                <div className={styles.btns}>
                    <Button type="primary" onClick={()=>{
                        const inp1 = document.getElementsByClassName('inp1')[0]
                        dispatch({
                            type: 'user/usernameList',
                            payload:inp1
                        })
                    }} >搜索</Button>
                    <Button>重置</Button>
                </div>
            </form>
            <div className={styles.list}>
                <Table columns={columns} dataSource={userList} />
            </div>
            <CommonFooter />
        </div>
    );
}
